<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>题库专家后台管理系统</title>
  <!-- <link rel="stylesheet" href="assect/css/index.css"> -->
  <link rel="stylesheet" href="../assect/css/buy.css">

  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
  <!-- <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> -->
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <script src="../assect/js/pagination.js"></script>
  <!-- <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script> -->
</head>

<body>
  <!-- 头部 -->
  <div class="header">
    <span>
      <div class="menu-icon"></div>
    </span>
    <p class="outLogin">退出登陆</p>
  </div>
  <!-- 侧边导航 -->
  <div id="canvas-warp">
    <div class="nav">
      <ul class="nav-ul">
        <li class="nav-font">
          <p>激活码管理</p>
          <ul class="son-nav">
            <a href="#">
              <li>激活码购买</li>
            </a>
            <a href="use.html">
              <li>激活码使用</li>
            </a>
            <a href="../index.html">
              <li>取码记录</li>
            </a><a href="buyRecord.html">
              <li>购买记录</li>
            </a><a href="recharge.html">
              <li>账户充值</li>
            </a><a href="RechargeRecord.html">
              <li>充值记录</li>
            </a>
          </ul>
        </li>
      </ul>
    </div>
    <div class="mask"></div>
  </div>
  <!-- 内容区域 -->
  <div class="content">
    <div class="content-box">
      <div class="title">激活码购买</div>
      <div class="content-box-con">
        <!-- 当前余额 -->
        <div>
          <span>您当前的余额</span>
          <p>2998.09</p>
        </div>
      </div>
      <div class="content-box-btn">
        <!-- 当前余额 -->
        <div class="content-box-btn-time">
          <span>购买时间</span>
          <div>
            <input type="radio" name="time">永久
            <input type="radio" name="time">1年
          </div>
        </div>
        <!-- 课程分类 -->
        <div class="content-box-btn-time">
          <span>课程分类</span>
          <div>
            <select>
              <option value="">工程类考试</option>
              <option value="">财务会计</option>
              <option value="">医药卫生</option>
              <option value="">从业资格</option>
              <option value="">公务员</option>
              <option value="">学历类</option>
              <option value="">其他考试</option>
            </select>
            |
            <select>
              <option value="">一级建造师</option>
              <option value="">二级建造师</option>
              <option value="">注册咨询工程师</option>
              <option value="">监理工程师</option>
              <option value="">二级造价工程师</option>
              <option value="">一级造价工程师</option>
              <option value="">注册安全工程师</option>
              <option value="">注册消防工程师</option>
              <option value="">环境影响评价工程师</option>
              <option value="">注册城乡规划师</option>
              <option value="">注册土木工程师</option>
            </select>
          </div>

        </div>
      </div>
      <div class="content-box-table">
        <div class="table">
          <table>
            <tr>
              <th><input type="checkbox">选择</th>
              <th>购买数</th>
              <th>课程</th>
              <th>永久零售价</th>
              <th>永久代理价</th>
              <th>1年零售价</th>
              <th>1年代理价</th>
            </tr>
            <tr>
              <td><input type="checkbox"></td>
              <td>1</td>
              <td>一建建设工程经济</td>
              <td>35.00</td>
              <td>1.11</td>
              <td>10.00</td>
              <td>0.79</td>
            </tr>
            <tr>
              <td><input type="checkbox"></td>
              <td>1</td>
              <td>一建建设工程经济</td>
              <td>35.00</td>
              <td>1.11</td>
              <td>10.00</td>
              <td>0.79</td>
            </tr>
            <tr>
              <td><input type="checkbox"></td>
              <td>1</td>
              <td>一建建设工程经济</td>
              <td>35.00</td>
              <td>1.11</td>
              <td>10.00</td>
              <td>0.79</td>
            </tr>
            <tr>
              <td><input type="checkbox"></td>
              <td>1</td>
              <td>一建建设工程经济</td>
              <td>35.00</td>
              <td>1.11</td>
              <td>10.00</td>
              <td>0.79</td>
            </tr>
            <tr>
              <td><input type="checkbox"></td>
              <td>1</td>
              <td>一建建设工程经济</td>
              <td>35.00</td>
              <td>1.11</td>
              <td>10.00</td>
              <td>0.79</td>
            </tr>

          </table>
        </div>
        <!-- 翻页导航 -->
        <!-- <div class="page-container"></div> -->
        <div class="now-buy">
          <p><input type="checkbox">购买后立即提取注册码</p>
          <button id="buyCode">立即购买</button>

        </div>
      </div>
    </div>
  </div>
  <!-- 分页 -->
  <script>
    const pageSize = 4
    const dataCount = 16
    const pager = new Pagination('.page-container', {
      pageSize: pageSize,
      autoLoad: true,
      toPage: function (index, _pageSize) {
        // 设置记录总数，用于生成分页HTML内容
        if (index === 0 || _pageSize) this.updateCount(dataCount, _pageSize)

        // 根据页码以及分页大小生成html内容
        let pageListHtml = ''
        for (var i = 0; i < (_pageSize || pageSize); i++) {
          pageListHtml += `
            <div class="col-md-3">
              <div class="card">
                <div class="card-body">
                  <h5 class="card-title">Card - ${index * (_pageSize || pageSize) + i + 1}</h5>
                  <p class="card-text">card-text,card-text,card-text,card-text</p>
                </div>
              </div>
            </div>
          `
        }
        $('.page-list').html(pageListHtml)
      }
    })
  </script>
  <script>
    $(function () {
      $('#canvas-warp').hide();
      $('.son-nav').show();
      // 点击图标，显示导航
      $('.menu-icon').click(function () {
        $('#canvas-warp').toggle(300);
      })
      // 点击遮罩，隐藏导航
      $('.mask').click(function () {
        $('#canvas-warp').toggle(300);
      })
      $('.nav-font').click(function (event) {
        $(this).children('.son-nav').toggle(300);
        $(this).siblings().children('.son-nav').hide(300);
      });
      // 跳转生成激活码
      $('#createCode').click(function () {
        $(location).attr('href', 'pages/createCode.html');
      })
      // 跳转激活码导出
      $('#exportCode').click(function () {
        $(location).attr('href', 'pages/exportCode.html');
      })

      // 退出登陆
      $('.outLogin').click(function () {
        $(location).attr('href', '../login.html');
      })
      // 点击跳转提取激活码页面
      $('#buyCode').click(function () {
        $(location).attr('href', 'buyCode.html');
      })
    })



  </script>
</body>

</html>